<template>
  <div class="container">
    <h2>合并canvas</h2>
    <div class="mergeId">
      <h2 class="pdf-group-item">模块1 module1 静态模块</h2>
      <p class="pdf-group-item">
        For a guide and recipes on how to configure / customize this project,
        <br />
        <img src="@/assets/Cat.gif" alt="" />
      </p>
      <h3 class="pdf-group-item">Installed CLI Plugins</h3>
      <ul>
        <li class="pdf-group-item">
          <a
            href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
            target="_blank"
            rel="noopener"
          >
            babel
          </a>
        </li>
        <li class="pdf-group-item">
          <a
            href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
            target="_blank"
            rel="noopener"
          >
            router
          </a>
        </li>
        <li class="pdf-group-item">
          <a
            href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
            target="_blank"
            rel="noopener"
          >
            vuex
          </a>
        </li>
        <li class="pdf-group-item">
          <a
            href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
            target="_blank"
            rel="noopener"
          >
            eslint
          </a>
        </li>
        <li class="pdf-group-item">
          <a
            href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
            target="_blank"
            rel="noopener"
          >
            typescript
          </a>
        </li>
      </ul>
      <h3 class="pdf-group-item pdf-split-page" style="color: red">
        这里强制分页了
      </h3>
      <div class="pdf-group-item">
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
      </div>

      <div class="pdf-group-item">
        这是一段文字7777
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        这是一段文字这是一段文字这是一段文字 这是一段文字这是一段文字
      </div>
      <div class="pdf-group-item">
        <img src="@/assets/Cat.gif" alt="" />
      </div>
      <div class="pdf-group-item">
        这是一段文字
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        这是一段文字这是一段文字这是一段文字 这是一段文字这是一段文字
      </div>
      <div class="pdf-group-item">
        这是一段文字
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        这是一段文字这是一段文字这是一段文字 这是一段文字这是一段文字
      </div>
      <div class="pdf-group-item">
        这是一段文字
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        这是一段文字这是一段文字这是一段文字 这是一段文字这是一段文字
      </div>
      <div class="pdf-group-item">这是一段文字</div>
      <div class="pdf-group-item">这是一段文字</div>

      <div style="color: red; font-size: 20px" class="pdf-group-item">
        66这是一段文字这是一段文字这是一段文字这是一段文字这是一
        段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字88
      </div>
      <div class="pdf-group-item">9999这是一段文字</div>
      <div class="pdf-group-item">这是一段文字</div>
      <div class="pdf-group-item">这是一段文字</div>
      <div class="pdf-group-item">
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
      </div>
      <div class="pdf-group-item">这是一段文字</div>
      <div class="pdf-group-item">这是一段文字</div>
      <div class="pdf-group-item">这是一段文字</div>
      <div class="pdf-group-item">这是一段文字</div>
      <div class="pdf-group-item">
        这是一段文字
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        这是一段文字这是一段文字这是一段文字 这是一段文字这是一段文字
      </div>
    </div>

    <img :src="canvasUrl" alt="" />
  </div>
</template>

<script>
import html2canvas from "html2canvas";

export default {
  data() {
    return {
      canvasUrl: "",
    };
  },

  components: {},

  created() {},

  mounted() {},

  methods: {
    async mergeCanvas() {
      const itemList = document.querySelectorAll(".pdf-group-item");
      const canvasList = [];

      for (let i = 0; i < itemList.length; i++) {
        const obj = {
          index: i,
          dom: itemList[i],
          canvas: null,
        };
        const canvas = await html2canvas(itemList[i], {
          useCORS: true,
        });
        obj.canvas = canvas;
        canvasList.push(obj);
      }

      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
    },
  },
};
</script>
<style scoped lang="scss"></style>
